<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        isScalingBtn
        :formColumns="FORM_ITEM_LIST"
        :dataSource="formData"
        :defaultExpandStatus="false"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <basic-table
        :showSelectCol="false"
        showActionCol
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="460"
        :selection-change="selectionChange"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <div slot="content_context">
          <el-button
            type="primary"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
            >导出</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="handleBatchEdit"
            >批量编辑</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="handleSameCateAdd"
            >同四级类新增</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="handleDiffCateAdd"
            >不同四级类新增</el-button
          >
        </div>
      </basic-table>
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import BasePage from '@/mixins/commodity/basePage';
import { setAuthBtnId, createExcelByExport, handleOpenNewPage } from '@/utils/bizUtils';
import {
  FORM_ITEM_LIST,
  TABLE_COLUMNS,
} from './constants';
import {
  queryStandardListService,
  exportStandardListService
} from '@api/commodity/temporaryPurchasingGoods/acceptanceStandard'

export default {
  mixins: [BasePage],
  components: {
    BasicForm,
    BasicTable
  },
  data () {
    return {
      FORM_ITEM_LIST,
      tableInfo: {
        list: [],
        selection: [],
        columns: TABLE_COLUMNS,
        loading: false
      },
      formData: {
        categoryPath: '',
        spuNo: '',
        skuNo: '',
        brandName: '',
        productName: '',
        checkItemType: ''
      }
    };
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      return <div class="table-action">
        <el-button size="mini" type="text" onClick={() => this.handleView(row)}>查看</el-button>
      </div>;
    },
    // 同四级类新增
    handleSameCateAdd () {
      handleOpenNewPage(this, {
        name: 'latentAcceptanceVerticalAdd',
      })
    },
    // 不同四级类新增
    handleDiffCateAdd () {
      handleOpenNewPage(this, {
        name: 'latentAcceptanceHorizontalAdd',
      })
    },
    // 批量编辑
    handleBatchEdit () {
      this.$router.push({ name: 'acceptanceStandardBatchEdit' })
    },
    // 勾选需要处理的库存
    selectionChange (rows) {
      this.tableInfo.selection = rows;
    },
    async getTableData () {
      setAuthBtnId()
      const res = await queryStandardListService(
        { ...this.formData, ...this.pagination },
        state => { this.tableInfo.loading = state }
      )
      if (res) {
        const { results, totalNum } = res.retData;
        this.tableInfo.list = results;
        this.pagination.totalNum = totalNum;
      }
    },
    // 查看
    handleView (row) {
      this.$router.push({
        name: 'acceptanceCriteriaView',
        query: {
          skuNo: row.skuNo,
        }
      });
    },
    // 导出模板
    async handleExport () {
      const res = await exportStandardListService(this.formData, state => { this.exportLoading = state });
      createExcelByExport({ res, excelTitle: '潜在商品验收标准' });
    },
  }
};
</script>
